<template>
  <div>
    <el-row style="background-color: rgb(248, 250, 255); height: 60px">
      <el-col :span="16" style="line-height: 60px; padding-left: 20px"
        >作业范围分配</el-col
      >
      <el-col
        v-if="!isDone"
        :span="8"
        style="line-height: 60px; text-align: right; padding-right: 20px"
      >
        <el-button
          @click="isDone = true"
          style="width: 100px; margin-right: 15px"
          size="medium"
          type="primary"
          >编辑</el-button
        >
      </el-col>
      <el-col
        v-else
        :span="8"
        style="line-height: 60px; text-align: right; padding-right: 20px"
      >
        <el-button
          style="width: 100px; margin-right: 15px"
          type="primary"
          size="medium"
          >保存</el-button
        >
        <el-button style="width: 100px" @click="close" size="medium"
          >取消</el-button
        >
      </el-col>
    </el-row>
    <el-row style="background-color: white; height: 730px">
      <el-col style="margin: 20px">
        <el-form>
          <el-form-item label="地区关键词：">
            <el-input style="width: 200px"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col v-if="isDone" style="margin-left: 20px; margin-bottom: 20px">
        <el-button
          type="primary"
          style="width: 100px"
          @click="editFugai"
          size="medium"
          >开始绘制</el-button
        >
        <el-button
          v-if="editDone"
          style="width: 100px; margin-left: 21px"
          size="medium"
          @click="editFugai"
          >删除围栏</el-button
        >
      </el-col>
      <baidu-map
        class="map"
        :center="diyue"
        :zoom="11"
        style="height: 600px; margin: 25px"
        @click="addPolygonPoint"
        :scroll-wheel-zoom="true"
      >
        <bm-polygon
          :path="polygonPath"
          stroke-color="rgb(251, 98, 50)"
          strokeStyle="solid"
          :stroke-opacity="0.7"
          :stroke-weight="1"
          :editing="editDone"
          fillColor="rgb(251, 98, 50)"
          :fillOpacity="0.3"
          @lineupdate="updatePolygonPath"
        />
      </baidu-map>
    </el-row>
  </div>
</template>

<script>
import { getMapDian, setMapDian } from "@/utils/strong";

export default {
  data() {
    return {
      editDone: false,
      isDone: false,
      diyue: { lng: 116.404, lat: 39.915 },
      polygonPath: getMapDian(),
    };
  },
  methods: {
    close() {
      this.editDone = false;
      this.isDone = false;
    },
    addPolygonPoint() {
      this.polygonPath.push({ lng: 116.404, lat: 39.915 });
    },
    updatePolygonPath(e) {
      setMapDian(e.target.getPath());
      this.polygonPath = e.target.getPath();
      console.log(this.polygonPath);
    },
    editFugai() {
      this.editDone = true;
      // this.isDone = true;
      console.log(this.polygonPath);
    },
  },
};
</script>

<style lang="scss" scoped></style>
